<template>
  <div class="list_box">
    <lang class="lang" />

    <div class="header_view">
      <div class="list_main">
        <div class="title_view"><title-com /></div>
        
        <div class="search_view"><Search /></div>
      </div>
    </div>

    <div class="detail_box container">
      <div class="left_box">
        <div class="back_btn" @click="goBack()"> 上一页 </div>
        <div class="title_box row">
          <div class="title fs_18 pb_3 col-12"><span class="mainColor fw_600 pr_10 min_w_300">书名:</span> <b>{{ bookDetailData.title }}</b></div>
          <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10 min_w_300">货架号:</span>{{ bookDetailData.shelf_number }}</div>
          <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10">作者:</span>{{ bookDetailData.authors }}</div>
          <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10 min_w_300">出版日期:</span>{{ bookDetailData.published }}</div>
          <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10 min_w_300">出版社:</span>{{ bookDetailData.publisher }}</div>
          <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10 min_w_300">ISBN:</span>[ {{ bookDetailData.isbn }} ]</div>
          <div class="fs_16 pb_3 col-lg-6 col-md-12"><span class="mainColor fw_600 pr_10 min_w_300">价格:</span>{{ bookDetailData.price }}</div>
          <div class="title fs_16 pb_3 col-12"><span class="mainColor fw_600 pr_10 min_w_300">摘要:</span>{{ bookDetailData.abstract || bookDetailData.description || '无' }}</div>
        </div>

        <!-- 翻页效果 -->
        <div class="img_box">
          <Turn :bookImgs="bookImgs" />

          <!-- loading 动画 -->
          <div v-show="isShow" class="loading_box">
            <div class="loading">
              <spinner />
            </div>
          </div>
        </div>
      </div>

      <div class="right_box" v-if="recommendBooks && recommendBooks.length">
        <div class="r_title mainColor fs_18 text_center">推荐书籍</div>

        <div class="recommend_list_box row">
          <div class="tui_jian_box col-lg-12 col-md-4" v-for="(item, index) in recommendBooks" :key="index">
            <div 
              class="title fs_16 fw_600 ellipsis h_30 l_h_30" 
              v-if="item.title && item.title !== '-'" 
              @click="handlerClickRecommendBook(index)"
            > 
            《{{ item.title }}》
            </div>
            <div class="title title_mn fs_16 fw_600 ellipsis h_30 l_h_30" v-else @click="handlerClickRecommendBook(index)">《{{ item.title_m }}》</div>
            <div class="img_box">
              <img class="img_full" :src="item.img || def_book" alt="" @click="handlerClickRecommendBook(index)">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import lang from '../components/lang.vue';
  import TitleCom from '../components/title.vue';
  import Search from '../components/search.vue';
  import Turn from './turn.vue';
  import Spinner from 'vue-simple-spinner'

  export default {
    name: 'BookDetail',
    components: { lang, TitleCom, Search, Turn, Spinner },
    data() {
      return {
        id: 0,
        bookDetailData: {},
        bookImgs: [],
        recommendBooks: [],
        def_book: require('../assets/def-book.png'),
        bgc_img: require('../assets/bgc_img.svg'),
        timer: null,
        isShow: false,
      }
    },
    created() {
      let id = this.$route.query.id
      if (id) {
        this.getBookDetail(id)
      }
    },
    methods: {
      // 获取 图书 详情信息
      async getBookDetail(id) {
        let that = this
        this.isShow = true

        // 判断 响应数据
        this.timer = setTimeout(() => {
          that.$message('求情失败，服务器发生错误！');
          that.isShow = false
        }, 3000)

        let res = await this.axios.get(`api/bookrec/api/v1/books/${ id }`)
        // let res = await this.axios.get(`/bookrec/api/v1/books/${ id }`)
        if (res.data.code == 200) {
          clearTimeout(that.timer)
          this.isShow = false
  
          that.bookDetailData = res.data.data
          that.bookImgs = res.data.data.images
          that.recommendBooks =  res.data.data.recommends
        } else {
          clearTimeout(that.timer)
          this.isShow = false
          this.$message('图书详情获取失败！');
          return false
        }
      },

      // 返回上一页
      goBack() {
        this.$router.back()
      },

      // 前往中文
      goToMnDetail(id) {
        this.$router.push({
          path: '/book-detail-mn',
          query: { id }
        })
      },

      // 点击 【推荐书籍】
      async handlerClickRecommendBook(index) {
        let id = this.bookDetailData.recommends[index].id

        if (this.bookDetailData.recommends[index].title && this.bookDetailData.recommends[index].title !== '-') {
          this.getBookDetail(id)
        } else {
          // 前往蒙文详情页
          this.goToMnDetail(id)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .list_box {
    height: 100vh;
    overflow: scroll;
    .header_view {
      width: 100%;
      padding-bottom: 20px;
      background-color: #fff;
      border-bottom: 1px solid #ccc;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 9;
      .list_main {
        width: 100%;
        position: relative;

        .title_view {
          width: 100%;
          position: absolute;
          top: 40px;
          left: 0;
        }

        .search_view {
          width: 40%;
          position: absolute;
          top: 100px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }  
  
    .detail_box {
      padding: 20px 0;
      overflow: hidden;

      .left_box {
        width: 80%;
        float: left;

        .back_btn { 
          width: 80px; 
          height: 35px; 
          line-height: 35px; 
          text-align: center; 
          border-radius: 5px; 
          margin-bottom: 5px; 
          background-color: #74a5ff; 
          color: #fff; 
          cursor: pointer;
        }

        .img_box {
          margin-top: 10px;
          border: 1px solid #74a5ff;
          position: relative;

          .loading_box {
            width: 20px;
            height: 20px;
            line-height: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 999;
            transform: translate(-50%, -50%);
            text-align: center;
            
            .loading {
              font-size: 100px;
              color: #ccc;
              .loading_icon { color: #74a5ff !important; }
            }
          }
        }
      }

      .right_box {
        width: 20%;
        float: left;
        padding-left: 10px;
        .r_title { width: 80%; }
        .row {
          .tui_jian_box {
            // width: 100%;
            .title {
              width: 100%;
              text-align: center;
            }
            .title:hover { cursor: pointer; }
            
            .title_mn {
              width: 15%;
              height: 200px;
              float: left;
              writing-mode: vertical-lr;
            }

            .img_box {
              width: calc(100% - 15%);
              height: calc(100% - 40px);
              float: right;
            }
            .img_box:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }  

  .list_box::-webkit-scrollbar {
    width: 3px;
    height: 100%;
    background-color: #f5f5f5;
  }
  .list_box::-webkit-scrollbar-thumb {       
    border-radius: 10px;
    background: #74a5ff;
  }

  .recommend_list_box {
    width: 100%;
    height: 820px;
    overflow: auto;
  }
  .recommend_list_box::-webkit-scrollbar {
    width: 2px;
    height: 100%;
    background-color: #f5f5f5;
  }
  .recommend_list_box::-webkit-scrollbar-thumb {       
    border-radius: 10px;
    background: #74a5ff;
  }

  @media screen and (min-width: 1600px) {
    .header_view { height: 182px; }
    .tui_jian_box { height: 280px; padding-bottom: 30px; }
    .tui_jian_box > .title { font-size: 18px; }
  }

  @media screen and (min-width: 1400px) and (max-width: 1599px) {
    .header_view { height: 182px; }
    .tui_jian_box { height: 260px; padding-bottom: 20px; }
    .tui_jian_box > .title { font-size:17px; }

    // .title_mn { width: 25% !important; }
    // .tui_jian_box > .img_box { width: calc(100% - 25%) !important; height: ;}
  }

  @media screen and (min-width: 1200px) and (max-width: 1299px) {
    .tui_jian_box { height: 210px !important; padding-bottom: 10px; }
  }
  @media screen and (min-width: 1300px) and (max-width: 1399px) {
    .tui_jian_box { height: 220px; padding-bottom: 10px; }
  }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    .header_view { height: 182px; }
    .tui_jian_box > .title { font-size: 16px; }
  }

  @media screen and (min-width: 1000px) and (max-width: 1299px) {
    .header_view { height: 180px; }
    .tui_jian_box { height: 200px; padding-bottom: 20px; }
    .tui_jian_box > .title { font-size: 15px; }
  }

  @media screen and (min-width: 768px) and (max-width: 999px) {
    .header_view { height: 179px; }
    .right_box {  margin-top: 50px; }
    .tui_jian_box { height: 190px; padding-bottom: 20px; }
    .tui_jian_box > .title { font-size: 14px; }
  }
</style>
